<!--
 * @Author: panda
 * @Date: 2022-05-18 09:38
 * @Description: 首页顶部组件
-->
<template>
  <div id="extendBar">
    <el-row type="flex" justify="center" align="middle" id="row-header">
      <el-col :sm="4" :md="4" :lg="5" :xl="5">
        <router-link to="/study">
          <el-icon id="Logo" size="40px">
            <component :is="VideoPlay" />
          </el-icon>
        </router-link>
      </el-col>
      <el-col :sm="8" :md="11" :lg="8" :xl="8">
        <el-input
          v-model="input"
          size="large"
          :prefix-icon="Search"
          clearable
          placeholder="输入关键字搜索"
        >
          <!-- 搜索按钮 -->
          <template #append>
            <el-button :icon="Search" @click="toSearch" />
          </template>
        </el-input>
      </el-col>
      <el-col :sm="9" :md="7" :lg="7" :xl="6" style="text-align: right">
        <el-space :size="30">
          <template v-if="!isLogin">
            <router-link to="/login">
              <el-button type="info" class="button">登陆/注册</el-button>
            </router-link>
          </template>
          <template v-else>
            <el-popover trigger="hover" :width="250">
              <template #reference>
                <el-link :underline="false" @click="toHomePage">
                  <el-avatar
                    :src="
                      userStore.getUserInfo.avatar
                        ? userStore.getUserInfo.avatar
                        : avatar
                    "
                  />
                </el-link>
              </template>
              <template #default>
                <el-space direction="vertical" style="width: 100%">
                  <el-link style="font-size: 25px">{{ userStore.getUserInfo.username }}</el-link>
                  <div style="text-align: center">
                  </div>
                  <el-link @click="toHomePage">个人中心</el-link>
                  <el-link @click="toChangePwd">修改密码</el-link>
                  <el-divider style="margin: 0" />
                  <el-link @click="logout">退出登陆</el-link>
                </el-space>
              </template>
            </el-popover>
          </template>
          <el-button :icon="Message" type="text" class="button" @click="toMessage">消息</el-button>
          <el-button :icon="Clock" type="text" class="button" @click="toHistory">历史</el-button>
          <el-button :icon="UploadFilled" type="text" class="button" @click="toUpload">投稿
          </el-button>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  Clock,
  Message,
  Search,
  UploadFilled,
  VideoPlay,
} from "@element-plus/icons-vue";
import VideoView from "@/views/StudyView.vue";
import { computed, defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";

export default defineComponent({
  components: {VideoView},
  setup() {
    const router = useRouter()

    const input = ref("");
    // 用户store，判断用户是否登陆
    const userStore = reactive(useUserStore());
    // 头像url
    const avatar = ref();
    // 从用户store获取头像链接
    avatar.value = computed(()=>{
      return userStore.getUserInfo.avatar ?
        userStore.getUserInfo.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    })

    // const searchType = ref("video");

    const toChangePwd = () => {
      router.push("changePwd")
    }


    const toSearch = () => {
      // 路由在新窗口跳转
      const routeOne = router.resolve({
        path: "/search/video",
        query: {
          // type: "video", // 默认搜索视频
          keyword: input.value,
        },
      });
      window.open(routeOne.href, "_blank");
    };

    // 路由跳转用户主页
    const toHomePage = () => {
      const routeOne = router.resolve({
        path: "/user/" + userStore.getUserInfo.id,
      });
      window.open(routeOne.href, "_blank");
    };

    // 登出
    const logout = () => {
      userStore.confirmLoginOut();
    };

    // TODO 路由跳转消息
    const toMessage = () => {
      const routeData = router.resolve({ path: "/message" });
      window.open(routeData.href, "_blank");
    };

    // 路由跳转历史
    const toHistory = () => {
      const routeData = router.resolve({ path: "/history" });
      window.open(routeData.href, "_blank");
    };

    // 路由跳转上传
    const toUpload = () => {
      const routeData = router.resolve({ path: "/upload" });
      window.open(routeData.href, "_blank");
    };

    //判断用户是否登陆，切换页面小组件
    const isLogin = computed(() => {
      return !!userStore.getToken;
    });

    return {
      Clock,
      Message,
      Search,
      UploadFilled,
      VideoPlay,
      isLogin,
      logout,
      input,
      userStore,
      toSearch,
      toUpload,toChangePwd,
      toMessage,
      toHistory,
      toHomePage,
      avatar,
    };
  },
});
</script>

<style scoped>
#extendBar {
  width: 100%;
  left: 0;
  background: #fff;
  z-index: 200;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
  color: gray;
}

@media screen and (max-width: 768px) {
  #row-header {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  #small-header {
    display: none;
  }
}

#Logo {
  padding: 10px;
}

.button {
  border: none;
  /*padding-left: 20px;*/
}

.el-row {
  height: 100%;
}

</style>
